<template>
    <el-container class="font">
        <!-- 头部 -->
        <el-header>
            <IHeader :user="user"/>
        </el-header>
        <!-- /头部 -->
        <!-- 主体 -->
        <el-main>
            <!-- <BreadCrumb/> -->
            <router-view />
        </el-main>
        <!-- /主体 -->
        <!-- 底部 -->
        <el-footer>
            <div style="color: white;">欢迎使用云野租房，在这里开始你的租房之旅吧 ^^√</div>
        </el-footer>
        <!-- /底部 -->
    </el-container>
</template>

<script>
import 'font-awesome/css/font-awesome.min.css'
import IHeader from './indexFragments/IHeader.vue';
import BreadCrumb from "./fragments/BreadCrumb.vue";

export default {
    name: "Index",
    components: {
        IHeader,BreadCrumb
    },
    data() {
        return {

            carouselImg: [
                { itemImg: require("../assets/carousel_1.jpg"), itemTitle: "吃面包的烤鳄鱼" },
                { itemImg: require("../assets/carousel_2.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_3.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_4.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_5.png"), itemTitle: "" },
                { itemImg: require("../assets/carousel_6.jpg"), itemTitle: "" },
            ],
            recommendHouse: [
                { itemImg: require("../assets/carousel_1.jpg"), itemTitle: "吃面包的烤鳄鱼" },
                { itemImg: require("../assets/carousel_2.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_3.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_4.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_5.png"), itemTitle: "" },
                { itemImg: require("../assets/carousel_6.jpg"), itemTitle: "" },
            ],

            user: this.$TestData.user,
            carouselImg: [
                { itemImg: require("../assets/carousel_1.jpg"), itemTitle: "吃面包的烤鳄鱼" },
                { itemImg: require("../assets/carousel_2.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_3.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_4.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_5.png"), itemTitle: "" },
                { itemImg: require("../assets/carousel_6.jpg"), itemTitle: "" },
            ],
            recommendHouse: [
                { itemImg: require("../assets/carousel_1.jpg"), itemTitle: "吃面包的烤鳄鱼" },
                { itemImg: require("../assets/carousel_2.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_3.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_4.jpg"), itemTitle: "" },
                { itemImg: require("../assets/carousel_5.png"), itemTitle: "" },
                { itemImg: require("../assets/carousel_6.jpg"), itemTitle: "" },
            ]
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
       // 初始化 user 信息
		initUser: function () {
            var tokenObject = this.$Storage.getItemForLs(this.$TestData.TOKEN_OBJECT_KEY);
            console.log(tokenObject.aud);
            if(tokenObject.aud!=0){
			this.$Request
				.fetch("/api/rentuser/user/" + tokenObject.aud, {})
				.then((result) => {
					this.user = result;
					//console.log(result);
					// 设置默认头像
					//console.log(this.user.userImage);
					if (this.user.userImage == null || this.user.userImage == '') {
						this.user.userImage = "/img/default_big.jpg";
					}
					if (!this.user.userImage.includes("/img/default_big.jpg")) {

						this.user.userImage = "http://127.0.0.1:8000" + this.user.userImage;
					}
					//console.log(this.user);
					// 清除密码
					this.user.password = "";
				})
				.catch(() => { });
            } 
		},
    },
    mounted: function () {
         this.initUser();
    },
};
</script>

<style scoped>
.font {
    font-family: 'Consola';
}

.el-header {
    background-color: #37bbbc;
    position: fixed;
    top: 0px;
    width: 100%;
    height: 60px;
    z-index: 10;
}

.el-header .fr {
    float: right;
}

.el-footer {
    background-color: #37bbbc;
    color: #333;
    text-align: center;
    line-height: 60px;
}
</style>